<template>
  <section class="app-inner">
    <el-row style="display: flex; height: 100%">
      <el-col style="width: 300px">
        <div class="inner-left">
          <div class="device-list">
            <device-tree ref="deviceTree" :planEqptIds="planEqptIds" @deviceClick="deviceClick"></device-tree>
          </div>
          <div class="device-wrap">
            <div class="play-seeting row-between">
              <div class="row-start">
                <div class="outer-set" @click="isLoop ? shutoffLoop() : setLoop()">
                  <i :class="isLoop ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
                  <span class="play-text">视频轮巡</span>
                </div>
              </div>
              <el-popover placement="bottom-end" width="160" trigger="click" popper-class="play-content">
                <div>
                  <ul class="set-wrap">
                    <li>
                      <span>轮巡间隔</span>
                      <el-input size="mini" v-model="planSaveModel.intervalTime"></el-input>
                      <span>秒</span>
                    </li>
                    <li @click="setTime">
                      <i class="el-icon-circle-check"></i>
                      <span class="set-text" style="color: #1890ff">设置时间</span>
                    </li>
                    <li>
                      <div v-if="!isLoop" @click="setLoop">
                        <i class="el-icon-video-play"></i>
                        <span class="set-text" style="color: #67c23a">开始轮巡</span>
                      </div>
                      <div v-else @click="shutoffLoop">
                        <i class="el-icon-video-pause"></i>
                        <span class="set-text" style="color: #f56c6c">停止轮巡</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div slot="reference" style="height: 100%">
                  <i class="el-icon-setting"></i>
                </div>
              </el-popover>
            </div>

            <div class="plan">
              <div class="plan-select row-start">
                <div class="plan-label">轮播方案:</div>
                <el-select
                  size="mini"
                  class="plan-list"
                  v-model="checkedPlan"
                  placeholder="请选择"
                  @change="planChange"
                >
                  <el-option v-for="item in planList" :key="item.id" :label="item.programName" :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="plan-btn row-around">
                <el-popover placement="top" width="260" popper-class="plan-save-content" v-model="visibleSave">
                  <p class="title">添加方案</p>
                  <div class="row-start plan-input">
                    <span class="plan-name">方案名称: </span>
                    <el-input size="mini" v-model="planSaveModel.programName"></el-input>
                  </div>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" @click="visibleSave = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="planSave">确定</el-button>
                  </div>
                  <el-button slot="reference" type="primary" size="mini">方案保存</el-button>
                </el-popover>
                <el-popover placement="top" width="300" popper-class="plan-save-content" v-model="visibleDelete">
                  <p class="title">删除方案</p>
                  <div class="row-start plan-input">
                    <span class="plan-name">方案名称: </span>
                    <el-select v-model="planDelIds" size="mini" multiple placeholder="请选择">
                      <el-option v-for="item in planList" :key="item.id" :label="item.programName" :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" @click="visibleDelete = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="planDelete">确定</el-button>
                  </div>
                  <el-button slot="reference" type="danger" size="mini">方案删除</el-button>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col style="flex: 1">
        <div class="inner-content">
          <el-row style="height: 100%">
            <el-col v-for="(index, i) in 4" :key="i" :span="12" class="video-wrap">
              <div class="video-list">
                <div class="list-content">
                  <div class="hava-video" v-if="getliveSource(index) && getliveSource(index).eqptId">
                    <video-player
                      :id="getliveSource(index).eqptId"
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="getliveSource(index).options"
                    />
                  </div>
                  <div v-else class="no-have">
                    <i class="el-icon-plus"></i>
                    <div class="add-font">从左侧列表选择视频监控</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-contrib-hls'
import 'video.js/dist/lang/zh-CN'
import { planAdd, planSearch, planDel } from './js/floor'
import DeviceTree from './components/DeviceTree'

export default {
  name: 'videoLoop',
  data () {
    return {
      planSaveModel: {
        programName: '',
        intervalTime: 15
      },
      visibleSave: false, // 方案保存
      visibleDelete: false, // 方案删除
      checkDeviceList: [], // 树选中的设备列表
      planList: [], // 方案列表
      planDelIds: [], // 方案删除ids
      loopNums: 0, // 轮巡替换的位置
      liveSource1: {},
      liveSource2: {},
      liveSource3: {},
      liveSource4: {},
      otherSource: [],
      isLoop: false,
      isDevicesChange: false, // 树选中的设备列表是否改变
      checkedPlan: '', // 下拉选择的轮播方案
      planEqptIds: [] // 下拉选择的轮播方案的设备列表
    }
  },
  components: {
    videoPlayer,
    DeviceTree
  },
  watch: {
    // 监听选择的设备是否变化,未变化,继续上次播放
    checkDeviceList (val) {
      if (val) this.isDevicesChange = true
    }
  },
  mounted () {
    this.planSearch()
  },
  beforeDestroy () {
    this.resetData()
  },
  methods: {
    // 停止轮巡
    shutoffLoop () {
      this.isLoop = false
      this.resetLoopTimer()
    },
    // 开始轮巡按钮
    setLoop () {
      if (!this.checkDeviceList.length) {
        return this.$message.info('请至少选择一个设备进行轮巡!')
      }
      this.isLoop = true
      // 如选择设备未改变,继续上次顺序轮播
      if (this.isDevicesChange) {
        this.resetData()
        this.isDevicesChange = false
      } else {
        return this.loop()
      }
      this.checkDeviceList.forEach((item, index) => {
        let obj = Object.assign(item, {
          options: {
            autoplay: true,
            muted: true,
            language: 'zh-CN',
            preload: 'auto',
            fluid: true,
            // aspectRatio: '16:9',
            sources: [
              {
                withCredentials: false,
                type: 'application/x-mpegURL',
                src: item.eqptHls
              }
            ],
            controlBar: {
              progressControl: false, // 进度条
              timeDivider: false, // 当前时间和持续时间的分隔符
              durationDisplay: false, // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true // 全屏按钮
            }
          }
        })
        if (index < 4) {
          this[`liveSource${index + 1}`] = obj
        } else {
          this.otherSource.push(obj)
        }
      })
      this.loop()
    },

    // 轮巡定时器
    loop () {
      if (this.checkDeviceList.length <= 4) {
        return false
      }
      this.loopTimer = setInterval(() => {
        this.loopNums++
        if (this.loopNums > 4) {
          this.loopNums = 1
        }
        this.otherSource.push(this[`liveSource${this.loopNums}`])
        this[`liveSource${this.loopNums}`] = this.otherSource.shift()
      }, this.planSaveModel.intervalTime * 1000)
    },

    // 清空数据
    resetData () {
      this.resetLoopTimer()
      this.loopNums = 0
      this.liveSource1 = {}
      this.liveSource2 = {}
      this.liveSource3 = {}
      this.liveSource4 = {}
      this.otherSource = []
    },
    // 清空定时器
    resetLoopTimer () {
      if (this.loopTimer) {
        clearInterval(this.loopTimer)
        this.loopTimer = null
      }
    },

    // 重置定时器时间
    setTime () {
      this.resetLoopTimer()
      this.loop()
    },

    // 保存方案
    async planSave () {
      const params = {
        equipmentId: this.checkDeviceList.map(item => item.eqptId).join(';'),
        ...this.planSaveModel
      }
      let res = await planAdd(params)
      if (res.code === 0) {
        this.$message.success('新增成功')
        this.planSearch()
      }
      this.visibleSave = false
    },
    // 查询方案
    async planSearch () {
      const params = {}
      let { data } = await planSearch(params)
      this.planList = data
    },
    // 删除方案
    async planDelete () {
      const params = {
        ids: this.planDelIds.join(';')
      }
      let res = await planDel(params)
      if (res.code === 0) {
        this.$message.success('删除成功')
        this.planDelIds = []
        this.planSearch()
      }
      this.visibleDelete = false
    },
    // 方案选择改变
    planChange (val) {
      let { intervalTime, equipmentId } = this.planList.filter(e => e.id === val)[0]
      this.planSaveModel.intervalTime = intervalTime
      this.planEqptIds = equipmentId.split(';')
    },

    // 设备选择回调
    deviceClick (val) {
      this.checkDeviceList = val
    },

    // 根据下标返回数据
    getliveSource (i) {
      return this[`liveSource${i}`]
    }
  }
}
</script>
<style lang="scss">
.el-icon-circle-check,
.el-icon-video-play,
.el-icon-video-pause {
  font-size: 16px;
  color: #1890ff;
}
.el-icon-video-play {
  color: #67c23a;
}
.el-icon-video-pause {
  color: #f56c6c;
}
.play-content {
  .set-wrap {
    cursor: pointer;
    li {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eeeeee;
      height: 40px;
      .el-input {
        width: 50px;
        margin: 0 10px;
        input {
          padding: 0 8px;
        }
      }
      .set-text {
        margin-left: 16px;
      }
    }
  }
}
.plan-save-content {
  text-align: center;
  .plan-input {
    margin: 30px 0;
  }
  .plan-name {
    width: 90px;
  }
}
</style>
<style lang="scss" scoped>
.app-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px 20px 20px;
  margin: 0;
}
.inner-left {
  display: flex;
  flex-direction: column;
  height: 100%;
  .device-list {
    flex: 1;
    height: 100%;
    background: #ffffff;
  }
  .device-wrap {
    box-sizing: border-box;
    margin-top: 10px;
    height: 300px;
    padding: 12px;
    background: #ffffff;
    .play-seeting {
      height: 40px;
      .outer-set {
        cursor: pointer;
      }
      .el-icon-video-play,
      .el-icon-setting {
        font-size: 16px;
        cursor: pointer;
      }
      .play-text {
        color: #606266;
        margin-left: 10px;
      }
    }
    .plan {
      margin-top: 10px;
      .plan-select {
        margin-bottom: 30px;
        .plan-label {
          color: #606266;
          width: 70px;
          display: inline-block;
        }
      }
    }
  }
}
.inner-content {
  height: 100%;
  .video-wrap {
    padding-left: 10px;
    height: 50%;
    &:nth-child(-n + 2) {
      padding-bottom: 5px;
    }
    &:nth-child(n + 3) {
      padding-top: 5px;
    }
    .video-list {
      box-sizing: border-box;
      height: 100%;
      background: #ffffff;
      padding: 10px;
      .list-content {
        border: 1px dashed #cccccc;
        height: 100%;
        .hava-video {
          width: 100%;
          height: 100%;
        }
        .no-have {
          cursor: pointer;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .el-icon-plus {
            color: #cccccc;
            font-size: 40px;
          }
          .add-font {
            margin-top: 20px;
            font-size: 16px;
            color: #cccccc;
          }
        }
      }
    }
  }
}
.video-player /deep/ {
  height: 100%;
  .video-js {
    height: 100%;
    .vjs-big-play-button {
      font-size: 2.5em;
    }
  }
}
</style>
